<template>
  <div>
    <el-row class="aaa" style v-if="Object.keys(projectinfo).length !== 0">
      <el-tabs id="elTabsThis" tab-position="top" :value="tablist.length>0 ? tablist[0].code : ''" @tab-click="tabClick" style="margin-top:3px;margin-left: 10px">
        <!-- 循环加载一级tab -->
        <el-tab-pane v-for="(item, index) in tablist" :key="'tab' + index" :name="item.code">
          <div slot="label" style="text-align:center;height:25px;">
            <!-- <el-badge is-dot v-if="item.name==='督办'&& superviseidot" /> -->
            <div>
              <el-badge is-dot :hidden="!doShowDot(item) || fromIndexType === 'file' || fromIndexType === 'query'">
                <img style=" width: 20px; height: 20px;" :src="item.iconimg" />
              </el-badge>
              <div style="height:20px;font-size:12px;margin-bottom:-20px">{{ item.name }}</div>

              <!-- <i class="el-icon-date"></i> -->
            </div>
          </div>
          <!-- 如果有二级tab，则加载二级tab -->
          <template v-if="item.children.length > 0">
            <el-tabs class="secondTabs" tab-position="top" @tab-click="subTabClick" :value="subTabName">
              <el-tab-pane v-for="(o, indexSub) in item.children" :key="'subTab' + indexSub" :name="o.code">
                <div slot="label" style="height:30px;line-height:30px;">
                  <el-row type="flex" justify="center">
                    <el-col :span="24" type="flex" justify="start">{{ o.name }}</el-col>
                  </el-row>
                </div>
              </el-tab-pane>
            </el-tabs>
          </template>
        </el-tab-pane>
      </el-tabs>
      <el-row v-if="componentList.length > 0">
        <el-col v-for="(componentTemp, componentIndex) in componentList" :span="componentTemp.spannum" :key="componentTemp.id + componentIndex">
          <component :is="componentTemp.code"  :ref="componentTemp.code" :projectId="projectinfo.id" :projectinfo="projectinfo" :moduleEditFlag="componentTemp.editflag" :fromIndexType="fromIndexType"  @refreshIndex="refreshTab"></component>
        </el-col>
      </el-row>
      <!-- <span v-else>您没有任何TAB权限</span> -->
    </el-row>
    <div v-if="Object.keys(projectinfo).length === 0" v-loading="Object.keys(projectinfo).length === 0" style="height: 1000px"></div>
  </div>
</template>

<script>
import { getTabAndComponents } from '../../../../api/projectIndexInfo'
import { getAction, putAction, postAction } from '@tapui/utils/http'
import sdProject from '@/views/gpm/gpmProject/component/projectConponentTrack'
import progressGantt from '@/views/gpm/gpmProjectProgress/progressGantt'
import progressEcharts from '@/views/gpm/gpmProjectProgress/progressEcharts'
import sdProjectPlan from '@/views/gpm/gpmProjectPlan/index'
import sdProjectPlanQuery from '@/views/gpm/gpmProjectPlan/indexQuery'
// import mpmProjectBidGuide from '@/views/mpm/mpmProjectBidGuide/indexQuery'
import sdProjectMilepost from '@/views/gpm/gpmProjectMilepost/indexQuery'
import sdProjectMilepostQuery from '@/views/gpm/gpmProjectMilepost/indexProjectQuery'
import sdProjectAppointment from '@/views/gpm/gpmProjectAppointment/indexTrack'
import sdProjectAppointmentQuery from '@/views/gpm/gpmProjectAppointment/indexQuery'
import sdProjectTeam from '@/views/gpm/gpmProjectTeam/indexQuery'
import sdProjectTeamQuery from '@/views/gpm/gpmProjectTeam/indexProjectQuery'
import sdProjectTask from '@/views/gpm/gpmProjectTask/indexQuery'
import sdProjectTaskQuery from '@/views/gpm/gpmProjectTask/indexProjectQuery'
// import mpmProject from '@/views/mpm/mpmProject/editTrack'
import sdProjectReview from '@/views/gpm/gpmProjectReview/indexEdit'
import sdProjectReviewQuery from '@/views/gpm/gpmProjectReview/indexQuery'
import sdProjectSupervise from '@/views/gpm/gpmProjectSupervise/index'
import sdProjectSuperviseQuery from '@/views/gpm/gpmProjectSupervise/indexQuery'
import sdProjectProblem from '@/views/gpm/gpmProjectProblem/index'
import sdProjectProblemQuery from '@/views/gpm/gpmProjectProblem/indexQuery'
import sdProjectStakeholder from '@/views/gpm/gpmProjectStakeholder/index'
import sdProjectStakeholderQuery from '@/views/gpm/gpmProjectStakeholder/indexQuery'
import sdProjectUniversalChange from '@/views/gpm/gpmProjectUniversalChange/index'
import sdProjectUniversalChangeQuery from '@/views/gpm/gpmProjectUniversalChange/indexQuery'
import sdProjectRisk from '@/views/gpm/gpmProjectRisk/index'
import sdProjectRiskQuery from '@/views/gpm/gpmProjectRisk/indexQuery'
import sdProjectCommunication from '@/views/gpm/gpmProjectCommunication/index'
import sdProjectCommunicationQuery from '@/views/gpm/gpmProjectCommunication/indexQuery'

export default {
  name: 'projectItemTab',
  // mixins: [mixin_list],
  components: {
    sdProject,
    progressGantt,
    progressEcharts,
    sdProjectPlan,
    sdProjectMilepost,
    sdProjectAppointment,
    sdProjectTeam,
    sdProjectTask,
    // mpmProject,
    sdProjectStakeholder,
    sdProjectCommunication,
    sdProjectCommunicationQuery,
    sdProjectStakeholderQuery,
    sdProjectPlanQuery,
    // mpmProjectBidGuide,
    sdProjectMilepostQuery,
    sdProjectAppointmentQuery,
    sdProjectTeamQuery,
    sdProjectTaskQuery,
    sdProjectReview,
    sdProjectReviewQuery,
    sdProjectSupervise,
    sdProjectSuperviseQuery,
    sdProjectProblem,
    sdProjectProblemQuery,
    sdProjectUniversalChange,
    sdProjectUniversalChangeQuery,
    sdProjectRisk,
    sdProjectRiskQuery
  },
  props: {
    projectinfo: {},
    projectRoleCode: Number,
    // 来自于哪个index组件
    fromIndexType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tablist: [],
      projectinfos: {},
      ownProjectRoleCode: Number,
      isLoad: false,
      componentList: [],
      firstComponets: {},
      subTabName: '',
      editFlag: 0, // 0：挂载不可编辑组件，1挂载可编辑组件
      superviseidot: false,
      isDot: {},
      datas: [],
      url: {
        list: '/sd/projectDemand/list',
        getApproval: '/cbo/approvalNodeIns/getApprovalAllCount'
      }
    }
  },
  computed: {
    doShowDot() {
      return function(item) {
        // return (item.name === '督办' && this.isDot.dotSupervise) || (item.name === '项目需求' && this.isDot.dotDemand)
        switch (item.name) {
          case '督办':
            return this.isDot.SdProjectSupervise
          case '问题':
            return this.isDot.SdProjectProblem
          case '风险':
            return this.isDot.SdProjectRisk
          case '任命':
            return this.isDot.SdProjectAppointment
          case '策划':
            return this.isDot.SdProjectPlan
          case '复盘':
            return this.isDot.SdProjectReview
          case '变更':
            return this.isDot.SdProjectUniversalChange
        }
      }
    }
  },
  methods: {
    refreshTab() {
      this.getAllApprovalInfo()
    },

    getAllApprovalInfo() {
      // 以后改成从后端nodIns /querySouceTypeCount 这个接口获取
      var sourceTypeDict = ['GpmProjectProblem', 'GpmProjectSupervise', 'GpmProjectRisk', 'GpmProjectAppointment', 'GpmProjectPlan', 'GpmProjectReview', 'GpmProjectUniversalChange']
      var sourceTypes = sourceTypeDict.join(',')
      var param = {
        sourcetype: sourceTypes,
        qry_projectcode: this.projectinfo.projectcode
      }
      getAction(this.url.getApproval, param).then((res) => {
        if (res.success) {
          res.result.forEach((item) => {
            this.$set(this.isDot, item.sourcetype, item.count > 0)
          })
        } else {
          this.$tap.alert(res.message, 'warning')
        }
      })
    },
    tabClick(param) {
      var that = this
      var componentListThat = []
      this.componentList = []
      // 获取此tab下挂载的tab
      this.tablist.forEach(function formatter(value, i) {
        // 如获取点击的tab的二级tab
        if (value.code === param.name) {
          // 如果有子tab则加载子tab的第一个tab下挂载的组件
          if (value.children.length > 0) {
            var firstChildren = value.children[0]
            componentListThat = firstChildren.componentsList
            that.subTabName = firstChildren.code
          } else {
            // 如果没有子TAB,则直接加载此tab下挂载的组件
            componentListThat = value.componentsList
          }
        }
      })
      // 过滤不需要挂载的组件
      componentListThat.forEach((element) => {
        if (element.editflag === this.editFlag) {
          this.componentList.push(element)
        }
      })
      // this.componentList = componentListThat
    },
    subTabClick(param) {
      this.componentList = []
      var componentListThat = []
      // 获取此tab下挂载的vue组件
      this.tablist.forEach(function formatter(value, i) {
        if (value.children.length > 0) {
          value.children.forEach((item, index) => {
            if (item.code === param.name) {
              componentListThat = item.componentsList
            }
          })
        } else {
          if (value.code === param.name) {
            componentListThat = value.componentsList
          }
        }
      })
      // 过滤不需要挂载的组件
      componentListThat.forEach((element) => {
        if (element.editflag === this.editFlag) {
          this.componentList.push(element)
        }
      })
    },
    getTabAndComponentList(projectRoleCode) {
      getTabAndComponents({ projectRoleCode: this.projectRoleCode }).then((res) => {
        if (res.statusCode === 200) {
          this.tablist = res.result
        }
        if (this.tablist.length === 0) {
          this.$tap.alert(`提示：抱歉，您不具备查看此项目的任何权限。`, 'warning')
        }
        var componentListThat = []
        // 取第一个作为默认选中
        if (this.tablist[0].children.length > 0) {
          componentListThat = this.tablist[0].children[0].componentsList
        } else {
          componentListThat = this.tablist[0].componentsList
        }
        // 过滤不需要挂载的组件
        componentListThat.forEach((element) => {
          if (element.editflag === this.editFlag) {
            this.componentList.push(element)
          }
        })
      })
    }
  },
  created() {},
  watch: {
    projectRoleCode(newValue, oldValue) {
      this.ownProjectRoleCode = newValue
      this.getTabAndComponentList(this.ownProjectRoleCode, this.projectinfo)
    },
    projectinfo(newValue, oldValue) {
      this.projectinfos = newValue
      this.getAllApprovalInfo()
    }
  },

  mounted() {
    // 获取在此项目中的角色id
    this.getTabAndComponentList()
  }
}
</script>

<style scoped>
.aaa {
  margin-left: 2px;
}
.aaa >>> .el-row {
  padding-bottom: 0px;
}
.aaa >>> #elTabsThis .el-tabs__item {
  line-height: 15px;
  height: 24px;
}
.aaa >>> #elTabsThis .el-tabs__nav-scroll {
  padding-bottom: 0px;
}
.aaa >>> #elTabsThis .el-tabs__header {
  margin: 0 0 0px;
}
.aaa >>> #elTabsThis .el-tabs__nav {
  padding-top: 5px;
  padding-bottom: 6px;
}
.aaa >>> .el-tabs__nav-wrap::after {
  height: 1px;
}
.secondTabs >>> .el-tabs__nav-wrap::after {
  display: none;
}
</style>
